/** 
  部分发布课程
*/
<template>
  <div class="part-course-release-container">
    <div style="height: 40px;">
      <el-breadcrumb separator="/" class="float-left" style="padding-top: 8px;">
        <el-breadcrumb-item :to="{ path: '/courseScoreMana' }">
          <span @click="backToMain()">{{ $t('courseScoreMana.courseScoreMana') }}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('courseScoreMana.partReleaseCourse') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="float-right">
        <el-button type="text" @click="backToMain()">{{ $t('common.btn.back') }}</el-button>
      </div>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="float-left">
        <h1 class="condition-title">{{$t('courseScoreMana.partReleaseCourseList')}}</h1>
      </div>
      <div class="float-right" style="margin-bottom:24px;">
        <el-button type="danger" @click="deleteData()">{{ $t('common.btn.delete') }}</el-button>
        <el-button type="primary" @click="addData()">{{ $t('common.btn.add') }}</el-button>
      </div>
      <edu-table :pagination="false" :order='false' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        <!-- 课程代码 -->
        <edu-table-column :label="$t('scoreEntryMana.courseCode')" prop="courseCode"></edu-table-column>
        <!-- 课程名称 -->
        <edu-table-column :label="$t('scoreEntryMana.courseName')" prop="courseName"></edu-table-column>
        <!-- 开课学院 -->
        <edu-table-column :label="$t('scoreEntrySwitch.startCollege')" prop="openCollegeI18n"></edu-table-column>
      </edu-table>
      <el-row type="flex" class="row-bg" justify="end" style="margin-top: 15px;">
        <el-col>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryForm.total_"
            style="float:right;margin-top:10px">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 新增开始 -->
    <el-dialog
      :before-close="beforeClose"
      :title="title"
      width="30%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="dialogForm" label-position="right" ref="dialogForm" label-width="120px" style="padding-right: 30px;">
        <el-row>
          <el-col :span="24">
            <!-- 课程代码 -->
            <el-form-item
              :label="$t('scoreEntryMana.courseCode') + '：'"
              prop="courseCode"
              :rules="[{ required: true, message: $t('scoreEntryMana.requireCourseCode'), trigger: 'blur' },{ validator: checkSpecial, trigger: 'blur'}]">
              <el-select
                v-model.trim="dialogForm.courseCode"
                :remote-method="remoteMethod"
                filterable
                remote
                clearable
                :placeholder="$t('common.pla.pleaseInput')"
                style="width:100%"
                @change="changeCourseCode">
                <el-option
                  v-for="item in options.courseCodeList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!-- 课程名称 -->
            <el-form-item 
              :label="$t('scoreEntryMana.courseName') + '：'"
              prop="name">
              <el-input disabled v-model="dialogForm.name" clearable style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!-- 开课学院 -->
            <el-form-item 
              :label="$t('scoreEntrySwitch.startCollege') + '：'"
              prop="collegeI18n">
              <el-input v-model="dialogForm.collegeI18n" disabled clearable style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <template>
          <el-button @click="cancel('dialogForm')">{{ $t('common.btn.cancel') }}</el-button>
          <el-button type="primary" @click="confirm('dialogForm')">{{ $t('common.btn.confirm') }}</el-button>
        </template>
      </span>
    </el-dialog>
    <!-- 新增结束 -->
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';

export default {
  components: {

  },
  data () {
    return {
      multipleSelection: [],
      dataList: [],
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0
      },
      title: '',
      dialogVisible: false,
      dialogForm: {
        courseCode: '',
        name: '',
        collegeI18n: ''
      },
      options: {
        courseCodeList: []
      }
    }
  },
  props: {

  },
  created() {

  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    // 校验特殊字符$
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im
      if (regEn.test(value)) {
        callback(new Error(this.$t('graduateBase.specialText')))
      } else {
        callback()
      }
    },
    onSubmit() {
      this.queryForm.pageNum_ = 1
      this.getListData()
    },
    getListData() {
      scoreManagementApi.queryCourseScoreManaWhiteInfo(this.queryForm).then((res) => {
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total_
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.getListData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.getListData()
    },
    // 返回主页
    backToMain() {
      this.$emit('refresh-main-page')
    },
    // 删除
    deleteData() {
      if (this.multipleSelection.length > 0) {
        let deleteArray = []
        this.multipleSelection.map(value => {
          deleteArray.push(value.gradeManageWhiteId)
        })
        this.$delConfirm().then(_ => {
          scoreManagementApi.deleteCourseScoreManaWhiteInfo({
            "gradeManageWhiteIdList": deleteArray
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success', 
                message: this.$t('scoreMangementBase.deleteSuccessfully')
              })
              this.onSubmit()
            }
          })
        })
      } else {
        this.$message(this.$t('graduateBase.pleaseChoose'));
      }
    },
    // 新增
    addData() {
      this.title = this.$t('courseScoreMana.addCourse')
      this.dialogVisible = true
    },
    // 输入课程代码
    remoteMethod(val) {
      let lang = this.$store.getters.language
      scoreManagementApi.queryCourseInfoByCourseCode({
        "courseCode": val
      }).then(res => {
        if (res.code === 200 && res.data) {
          const list = res.data &&
            res.data.map(e => {
              let obj = {}
              obj.label = lang === 'cn' ? e.name : e.nameEn
              obj.value = e.code
              obj.collegeI18n = e.collegeI18n
              return obj
            })
          this.options.courseCodeList = list
        }
      })
    },
    // 选择课程代码
    changeCourseCode(val) {
      let courseInfo = this.options.courseCodeList.filter(value => {
        return value.value === val
      })
      this.dialogForm.name = courseInfo[0].label
      this.dialogForm.collegeI18n = courseInfo[0].collegeI18n
    },
    // 关闭前回调
    beforeClose() {
      this.cancel()
    },
    // 取消
    cancel() {
      this.dialogVisible = false
      Object.keys(this.dialogForm).forEach(key => this.dialogForm[key] = '')
      this.$refs['dialogForm'].clearValidate()
    },
    // 确定
    confirm() {
      this.$refs['dialogForm'].validate(valid => {
        if (valid) {
          let params = {
            "courseCode": this.dialogForm.courseCode
          }
          scoreManagementApi.addCourseScoreManaWhiteInfo(params).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success', 
                message: this.$t('scoreMangementBase.addSuccessfully')
              })
              this.cancel()
              this.onSubmit()
            }
          })
        } else {
          setTimeout(() => {
            let isError = document.getElementsByClassName("is-error");
            if (isError[0] && isError[0] && isError[0].querySelector('input')) {
              isError[0].querySelector('input').focus();
            }
          }, 1);
        }
      })
    }
  },
  watch: {
    "dialogForm.courseCode": {
      handler(newVal) {
        if (!newVal) {
          this.dialogForm.name = ''
          this.dialogForm.collegeI18n = ''
          this.options.courseCodeList = []
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .part-course-release-container ::v-deep {

  }
</style>